Leer hoe u de CSS @page-regel gebruikt om printvriendelijke stylesheets te maken die geoptimaliseerd zijn voor leesbaarheid en toegankelijkheid op verschillende apparaten en in diverse regio's.
CSS @page: Meester in het aanpassen van print-stylesheets voor een wereldwijd publiek
In het huidige digitale landschap wordt het belang van print-stylesheets gemakkelijk over het hoofd gezien. Toch is het aanbieden van een goed opgemaakte, printervriendelijke versie van uw website-inhoud cruciaal voor de toegankelijkheid en gebruikerservaring. Gebruikers met verschillende achtergronden geven er misschien de voorkeur aan om informatie offline te lezen en te gebruiken, en een correct opgemaakte printversie toont een toewijding aan inclusiviteit. Deze uitgebreide gids duikt in de kracht van de CSS @page-regel, waarmee u aangepaste printlay-outs kunt maken die zijn afgestemd op een wereldwijd publiek.
Waarom print-stylesheets belangrijk zijn
Hoewel we in een digitaal tijdperk leven, is de behoefte aan geprinte documenten niet verdwenen. Denk aan de volgende scenario's:
- Educatief materiaal: Studenten geven vaak de voorkeur aan geprint materiaal om te studeren en aantekeningen te maken.
- Juridische documenten: Contracten, overeenkomsten en juridische informatie vereisen vaak geprinte exemplaren.
- Recepten: Veel koks hebben liever een geprint recept in de keuken, om het gedoe van scrollen op een scherm met vieze handen te vermijden.
- Reisinformatie: Reizigers printen soms kaarten, reisroutes en essentiële documenten voor offline toegang, vooral in gebieden met beperkte internetverbinding.
- Toegankelijkheid: Sommige gebruikers met een visuele beperking vinden het gemakkelijker om geprinte tekst te lezen met aangepaste lettergroottes en contrast.
Een speciale print-stylesheet zorgt ervoor dat uw inhoud in het best mogelijke formaat wordt gepresenteerd om te printen, ongeacht het apparaat of de browser van de gebruiker. Zonder een dergelijke stylesheet zouden gebruikers de volledige website kunnen printen, inclusief navigatie, zijbalken en andere elementen die niet relevant zijn in een geprint document. Dit verspilt inkt en papier en kan resulteren in een rommelige en onleesbare uitvoer.
Introductie van de CSS @page-regel
De @page-regel in CSS stelt u in staat om de lay-out en het uiterlijk van geprinte pagina's te beheren. Het biedt een mechanisme om marges, paginaformaat, oriëntatie en andere eigenschappen te definiëren die specifiek zijn voor printmedia. De @page-regel wordt binnen een @media print-blok geplaatst om ervoor te zorgen dat de stijlen alleen worden toegepast bij het printen.
Hier is de basissyntaxis:
@media print {
@page {
/* CSS-eigenschappen voor printstijlen komen hier */
}
}
Essentiële @page-eigenschappen
De @page-regel biedt een reeks eigenschappen om uw printlay-out aan te passen. Laten we enkele van de belangrijkste verkennen:
1. Formaat (Size)
De size-eigenschap definieert de afmetingen van de geprinte pagina. Veelvoorkomende waarden zijn:
auto: De browser bepaalt het paginaformaat op basis van de printerinstellingen.A4: Het standaard paginaformaat dat in de meeste landen wordt gebruikt (210mm x 297mm).Letter: Het standaard paginaformaat dat in de Verenigde Staten en Canada wordt gebruikt (8,5 inch x 11 inch).Legal: Een groter paginaformaat dat vaak wordt gebruikt voor juridische documenten (8,5 inch x 14 inch).- Aangepaste afmetingen: U kunt ook de breedte en hoogte van de pagina specificeren met eenheden zoals
px,cmofin. Bijvoorbeeld:size: 20cm 30cm;
Voorbeeld: Het paginaformaat instellen op A4:
@media print {
@page {
size: A4;
}
}
Wereldwijde overwegingen: Onthoud dat de standaarden voor paginaformaten wereldwijd verschillen. Hoewel A4 in de meeste regio's dominant is, is Letter de standaard in Noord-Amerika. Overweeg opties te bieden waarmee gebruikers hun voorkeursformaat kunnen kiezen of gebruik auto om te vertrouwen op de printerinstellingen.
2. Marge (Margin)
De margin-eigenschap regelt de ruimte tussen de inhoud en de randen van de pagina. U kunt individuele marges instellen voor de boven-, rechter-, onder- en linkerkant van de pagina, of een verkorte notatie gebruiken.
margin: 1in;: Stelt alle marges in op 1 inch.margin: 1in 2in;: Stelt de boven- en ondermarges in op 1 inch, en de linker- en rechtermarges op 2 inch.margin: 1in 2in 3in;: Stelt de bovenmarge in op 1 inch, de linker- en rechtermarges op 2 inch, en de ondermarge op 3 inch.margin: 1in 2in 3in 4in;: Stelt respectievelijk de boven-, rechter-, onder- en linkermarges in op 1 inch, 2 inch, 3 inch en 4 inch.
Voorbeeld: Marges instellen voor A4-papier:
@media print {
@page {
size: A4;
margin: 1cm;
}
}
Wereldwijde overwegingen: Margegroottes kunnen de leesbaarheid beïnvloeden, vooral bij talen met lange woorden of complexe schriften. Zorg voor voldoende marges om te voorkomen dat tekst wordt afgesneden of er krap uitziet.
3. Oriëntatie (Orientation)
De orientation-eigenschap specificeert of de pagina in staande (portret) of liggende (landschap) modus moet worden geprint.
portrait: De standaardoriëntatie, waarbij de pagina hoger is dan breed.landscape: De pagina is breder dan hoog.
Voorbeeld: Liggende oriëntatie forceren:
@media print {
@page {
size: A4 landscape;
}
}
Wereldwijde overwegingen: Een liggende oriëntatie kan handig zijn voor het weergeven van brede tabellen, grafieken of afbeeldingen. Houd rekening met de lay-out van de inhoud en de behoeften van de gebruiker bij het kiezen van de oriëntatie.
4. Snijtekens (Marks)
De marks-eigenschap voegt snijtekens en/of registratietekens toe aan de geprinte pagina. Deze worden voornamelijk gebruikt in professioneel drukwerk voor het snijden en uitlijnen van pagina's.
crop: Voegt snijtekens toe aan de hoeken van de pagina, die aangeven waar het papier moet worden bijgesneden.cross: Voegt registratietekens (kleine kruisjes) toe om te helpen bij het uitlijnen van verschillende kleurscheidingen.none: Er worden geen tekens toegevoegd.
Voorbeeld: Snijtekens toevoegen:
@media print {
@page {
size: A4;
marks: crop;
}
}
Wereldwijde overwegingen: De marks-eigenschap is voornamelijk relevant voor professioneel drukwerk en is mogelijk niet nodig voor typische webinhoud die op thuis- of kantoorprinters wordt afgedrukt.
5. Afloop (Bleed)
De bleed-eigenschap specificeert de hoeveelheid inhoud die buiten de randen van de pagina uitsteekt. Dit wordt gebruikt om ervoor te zorgen dat kleuren of afbeeldingen tot aan de uiterste rand van de geprinte pagina lopen nadat deze is bijgesneden.
Voorbeeld: Een afloopgebied van 5 mm instellen:
@media print {
@page {
size: A4;
bleed: 5mm;
}
}
Wereldwijde overwegingen: Net als marks wordt bleed voornamelijk gebruikt in professionele drukwerkcontexten. Het is belangrijk om uw inhoud te ontwerpen met afloop in gedachten als u van plan bent dit te gebruiken.
Verder dan @page: printstijlen verbeteren
Hoewel de @page-regel controle geeft over de paginalay-out, moet u ook andere CSS-stijlen toepassen om de inhoud voor het printen te optimaliseren. Hier zijn enkele essentiële technieken:
1. Onnodige elementen verbergen
Verwijder elementen die niet relevant zijn in een geprint document, zoals navigatiemenu's, zijbalken, advertenties en social media widgets. Gebruik de display: none;-eigenschap binnen het @media print-blok om deze elementen te verbergen.
Voorbeeld: De navigatie en zijbalk verbergen:
@media print {
nav, aside {
display: none;
}
}
2. Leesbaarheid van tekst optimaliseren
Pas lettergroottes, regelhoogtes en kleuren aan om de leesbaarheid op papier te verbeteren. Gebruik een duidelijk en leesbaar lettertype, zoals Arial, Helvetica of Times New Roman.
Voorbeeld: Tekststijlen aanpassen:
@media print {
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
line-height: 1.5;
color: #000;
}
a {
color: inherit; /* Linkkleur verwijderen */
text-decoration: none; /* Onderstrepingen verwijderen */
}
}
Wereldwijde overwegingen: Lettertypekeuzes moeten de tekensets ondersteunen die in verschillende talen worden gebruikt. Zorg ervoor dat het geselecteerde lettertype glyphs bevat voor alle tekens in uw inhoud. Als u bijvoorbeeld Chinese, Japanse of Koreaanse tekens gebruikt, kies dan een lettertype dat speciaal voor die talen is ontworpen.
3. Omgaan met afbeeldingen en grafische elementen
Optimaliseer afbeeldingen en grafische elementen voor het printen. Overweeg het gebruik van grijswaardenversies van afbeeldingen om inkt te besparen. Als afbeeldingen essentieel zijn, zorg er dan voor dat ze een voldoende hoge resolutie hebben om duidelijk te kunnen worden afgedrukt.
Voorbeeld: Afbeeldingen omzetten naar grijswaarden:
@media print {
img {
filter: grayscale(100%);
}
}
Wereldwijde overwegingen: Wees u bewust van culturele gevoeligheden bij het gebruik van afbeeldingen. Zorg ervoor dat de afbeeldingen geschikt zijn voor een divers publiek en vermijd beeldmateriaal dat als aanstootgevend of verkeerd geïnterpreteerd kan worden.
4. Omgaan met links
Standaard printen browsers mogelijk niet de URL's die aan hyperlinks zijn gekoppeld. U kunt CSS gebruiken om de URL's naast de links weer te geven.
Voorbeeld: URL's weergeven:
@media print {
a[href]:after {
content: " (" attr(href) ")";
}
}
5. Tabellen beheren
Zorg ervoor dat tabellen correct zijn opgemaakt voor het printen. Vermijd brede tabellen die mogelijk worden afgesneden. Gebruik CSS om tabelranden, opvulling en lettergroottes te beheren.
Voorbeeld: Tabellen stijlen voor print:
@media print {
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 5px;
}
}
Wereldwijde overwegingen: Sommige talen gebruiken een rechts-naar-links tekstrichting. Zorg ervoor dat uw tabelstijlen correct omgaan met rechts-naar-links lay-outs.
6. Onnodige kleuren vermijden
Printen in kleur verbruikt meer inkt. Overweeg een monochroom kleurenschema te gebruiken voor print-stylesheets om inkt te besparen en de leesbaarheid te verbeteren. U kunt dit bereiken door de tekstkleur in te stellen op zwart en de achtergrondkleur op wit (of een heel lichtgrijs).
Voorbeeld: Kleuren instellen voor print:
@media print {
body {
color: #000;
background-color: #fff;
}
}
7. Pagina-einden
Gebruik de eigenschappen page-break-before, page-break-after en page-break-inside om te bepalen waar pagina-einden optreden. Deze eigenschappen kunnen helpen voorkomen dat koppen van hun inhoud worden gescheiden of dat tabellen over pagina's worden verdeeld.
page-break-before: always;: Forceert een pagina-einde vóór het element.page-break-after: always;: Forceert een pagina-einde na het element.page-break-inside: avoid;: Probeert een pagina-einde binnen het element te vermijden.
Voorbeeld: Pagina-einden binnen tabellen voorkomen en een pagina-einde forceren voor elk nieuw hoofdstuk:
@media print {
table {
page-break-inside: avoid;
}
h2 {
page-break-before: always;
}
}
Print-stylesheets implementeren
Er zijn twee primaire manieren om print-stylesheets te implementeren:
1. Externe stylesheet
Maak een apart CSS-bestand speciaal voor printstijlen (bijv. print.css) en koppel dit aan uw HTML-document met de <link>-tag met het media="print"-attribuut.
<link rel="stylesheet" href="print.css" media="print">
Deze aanpak houdt uw printstijlen gescheiden van uw schermstijlen, wat uw code beter georganiseerd en onderhoudbaar maakt.
2. Inline stijlen
Voeg uw printstijlen rechtstreeks in het HTML-document in met de <style>-tag binnen een @media print-blok.
<style>
@media print {
/* Printstijlen komen hier */
}
</style>
Deze aanpak is geschikt voor kleine projecten of wanneer u slechts een paar eenvoudige printstijlen nodig heeft. Het kan uw HTML-document echter rommeliger maken als u een groot aantal printstijlen heeft.
Uw printstijlen testen
Nadat u uw print-stylesheet heeft geïmplementeerd, is het cruciaal om deze grondig te testen om ervoor te zorgen dat uw inhoud correct wordt geprint.
- Gebruik de print-preview van uw browser: De meeste browsers hebben een ingebouwde print-preview-functie waarmee u kunt zien hoe uw pagina eruit zal zien als deze wordt geprint.
- Printen naar PDF: Gebruik de optie 'printen naar PDF' van uw browser om een PDF-bestand van uw pagina te maken. Hiermee kunt u de geprinte uitvoer nader bekijken en delen met anderen.
- Test op verschillende browsers en apparaten: Printstijlen kunnen licht variëren tussen verschillende browsers en apparaten. Test uw print-stylesheet op meerdere browsers en apparaten om consistentie te garanderen.
- Vraag om feedback: Vraag gebruikers met diverse achtergronden om uw inhoud te printen en feedback te geven over de leesbaarheid, lay-out en algehele ervaring.
Toegankelijkheidsoverwegingen
Bij het maken van print-stylesheets is het essentieel om rekening te houden met de toegankelijkheid voor gebruikers met een beperking. Hier zijn enkele tips:
- Zorg voor voldoende contrast: Zorg voor voldoende contrast tussen de tekst- en achtergrondkleuren om de tekst gemakkelijk leesbaar te maken.
- Gebruik leesbare lettertypen: Kies lettertypen die gemakkelijk te lezen zijn voor gebruikers met een visuele beperking.
- Vermijd het gebruik van kleur als enige middel om informatie over te brengen: Gebruikers met kleurenblindheid kunnen mogelijk geen onderscheid maken tussen bepaalde kleuren. Gebruik alternatieve methoden, zoals tekstlabels of symbolen, om informatie over te brengen.
- Bied alternatieve tekst voor afbeeldingen: Voeg
alt-attributen toe aan alle afbeeldingen om alternatieve tekst te bieden voor gebruikers die de afbeeldingen niet kunnen zien.
Conclusie
Het beheersen van de aanpassing van print-stylesheets met de CSS @page-regel is cruciaal voor het bieden van een positieve gebruikerservaring en het waarborgen van de toegankelijkheid voor een wereldwijd publiek. Door de verschillende @page-eigenschappen te begrijpen en best practices voor printstyling toe te passen, kunt u printervriendelijke versies van uw website-inhoud maken die geoptimaliseerd zijn voor leesbaarheid, bruikbaarheid en inkt-efficiëntie. Vergeet niet om uw print-stylesheets grondig te testen en rekening te houden met de toegankelijkheid voor alle gebruikers.
Door deze strategieën te implementeren, toont u een toewijding aan het bieden van een uitgebreide en inclusieve ervaring voor alle gebruikers, ongeacht hun voorkeursmethode voor toegang tot informatie. Dit verbetert uiteindelijk de bruikbaarheid van uw website en versterkt de reputatie van uw merk op wereldwijde schaal.